// src/pages/Dashboard/index.tsx

import React, { useEffect, useState } from "react";
import { Row, Col, Card, Statistic } from "antd";
import { HomeOutlined, UsergroupAddOutlined } from "@ant-design/icons";
import api from "@api"; // 假设有个 /dashboard/stats 接口
import "./dashboard.less";

interface StatsData {
  userCount: number;
  orderCount: number;
  revenue: number;
}

const Dashboard: React.FC = () => {
  const [stats, setStats] = useState<StatsData>({
    userCount: 0,
    orderCount: 0,
    revenue: 0,
  });

  useEffect(() => {
    // 向后端请求统计数据
    api.get("/dashboard/stats").then((res: StatsData) => {
      setStats(res);
    });
  }, []);

  return (
    <div>
      <Row gutter={16}>
        <Col span={8}>
          <Card>
            <Statistic
              title="用户总数"
              value={stats.userCount}
              prefix={<UsergroupAddOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="订单总数"
              value={stats.orderCount}
              prefix={<HomeOutlined />}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="总收入"
              value={stats.revenue}
              precision={2}
              suffix="元"
            />
          </Card>
        </Col>
      </Row>

      {/* 可以在这里加更多图表、图形化统计 */}
    </div>
  );
};

export default Dashboard;
